<template>
  <!-- 图片预览 -->
  <div class="previews">
    <div
      class="up_li"
      v-for="(item, index) in albumList"
      :key="index"
      @click.stop
      :style="showBig ? 'width:90%!important;margin:0.2rem auto' : ''">
      <!-- 视频 -->
      <template
        v-if="
          item.sourcePath.indexOf('.mp4') != -1 ||
          item.sourcePath.indexOf('.mov') != -1 ||
          item.sourcePath.indexOf('.MOV') != -1
        ">
        <img :src="item.thumbnailPath" class="up-img" @click="preview(item)" />
        <van-icon name="play-circle-o" class="v_btn" @click="preview(item)" />
      </template>
      <!-- 图片 -->
      <template v-else>
        <img :src="item.thumbnailPath" class="up-img" @click="preview(item)" />
      </template>
      <van-icon name="cross" @click="deleteImg(index)" class="close" v-if="entry" />
    </div>
    <!-- <VideoPlay /> -->
    <videoPreview :show="videoPlayShow" :src="videoPlayUrl" @close="videoClose" />
  </div>
</template>

<script>
import videoPreview from '@com/videoPreview'
import { popstateHandler } from '@/common/popstateHandler.js'
export default {
  name: 'PicturePreviewImg',
  components: {
    videoPreview,
  },
  props: {
    albumList: {
      type: Array,
      default: () => {
        return []
      },
    },
    entry: {
      type: Boolean,
      default: true,
    },
    showBig: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      videoPlayShow: false,
      videoPlayUrl: '',
      previewShow: false,
    }
  },
  computed: {},
  watch: {
    previewShow(now) {
      if (now) {
        // 有附件展示的时候屏蔽物理返回键
        // history.pushState(null, null, location.href)
        const that = this
        popstateHandler.popstateListener(() => {
          that.videoClose()
        }, 'previewShow')
      } else {
        popstateHandler.removePopstateListener('previewShow')
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 预览图片
    preview(item) {
      // let params = {
      //   img: item,
      //   imgList: this.albumList,
      // }
      // sessionStorage.setItem('imgInfo', JSON.stringify(params))
      // this.$router.push('/picturePreview')
      const that = this
      that.previewShow = true
      if (
        item.sourcePath.indexOf('.mp4') !== -1 ||
        item.sourcePath.indexOf('.mov') !== -1 ||
        item.sourcePath.indexOf('.MOV') !== -1
      ) {
        that.playVideoItem(item)
      } else {
        const url = item.sourcePath
        const imagesArr = []
        that.albumList.forEach(item => {
          if (
            item.sourcePath.indexOf('.mp4') === -1 &&
            item.sourcePath.indexOf('.mov') === -1 &&
            item.sourcePath.indexOf('.MOV') === -1
          ) {
            imagesArr.push(item.sourcePath)
          }
        })
        that.$ImagePreview({
          images: imagesArr,
          startPosition: imagesArr.findIndex(i => i === url),
          closeable: true,
          className: 'preview_view',
          loop: false,
          onClose() {
            that.previewShow = false
          },
          onChange(index) {
            if (index === imagesArr.length - 1 && imagesArr.length > 1) {
              this.$toast('这是最后一张了')
            }
          },
        })
      }
    },
    // 删除
    deleteImg(e) {
      this.albumList.splice(e, 1)
      this.$emit('deleteImg')
    },
    // 视频播放
    playVideoItem(item) {
      this.videoPlayUrl = item.sourcePath
      this.videoPlayShow = true
    },
    // 视频关闭
    videoClose() {
      this.previewShow = false
      this.videoPlayUrl = ''
      this.videoPlayShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
.previews {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 8px;
  width: 100%;
  justify-content: space-between;
  .up_li {
    width: 45% !important;
    height: 108px !important;
    background-color: #f8f8f8;
    border-radius: 1px;
    position: relative;
    margin-bottom: 8px;

    &:not(:nth-child(3n)) {
    }

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #999999;
    font-size: 12px;

    .icon {
      font-size: 20px;
      color: #666666;
      margin-bottom: 10;
    }
    .text {
      font-size: 12px;
    }
    .up-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .close {
      position: absolute;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #999999;
      top: -6px;
      right: -6px;
      text-align: center;
      line-height: 16px;
      color: #ffffff;
      font-size: 7px;
    }

    .v_btn {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 25px;
      height: 25px;
    }
  }
}
</style>
